<template>
  <div class="dashboard">
    <div ref="echartsRef" :style="{ width: '600px', height: '500px' }"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";

import * as echarts from "echarts";

export default defineComponent({
  name: "dashboard",
  setup() {
    const echartsRef = ref<HTMLElement>();
    // echarts.init(dom,theme,options)
    onMounted(() => {
      const echartInstance = echarts.init(echartsRef.value!);
      const option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };
      echartInstance.setOption(option);
    });

    return {
      echartsRef,
    };
  },
});
</script>

<style scoped></style>
